<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>

        <input type="text" v-model="val" ref="myinp">
        <button @click="btnClick">获取输入的内容</button>


        <ul>
            <!-- 可以给多个元素添加一个相同的 ref 值，当获取的时候可以获取到一个数组 -->
            <li v-for="item in list" ref="ji"> {{ item }} </li>
        </ul>

        <!-- ref 也可以设置为一个函数，函数中有一个参数，参数就是元素本身 -->
        <h1 :ref="refFn">你笑起来真好看</h1>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                val: '',
                list: ['黄焖鸡', '小鸡蘑菇', '大盘鸡', '可乐鸡']
            }
        },
        methods: {
            btnClick() {
                // console.log(this);

                // 点击获取输入的内容
                // console.log(document.querySelector('input').value);

                // 双向绑定拿值
                // console.log(this.val);

                // 如果在 vue 中需要使用 DOM 可以给其添加一个 ref 属性，在事件或者钩子函数中
                // 通过 this.$refs 进行获取，ref 属性也可以用来标记组件
                console.log(this.$refs.myinp.value);

            },
            refFn(el) {
                console.log(11111, el);
            }
        },
        mounted() {
            console.log(this.$refs.ji[0]);
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>